<!-- 学生端考试系统 -->

<template>
  <div style="height: 100%;box-sizing: border-box">
    <el-container style="height: 100%">
      <el-header>
        <div style="float: left;display: inline-block">
          <span class="logo" style="font-size: 20px;color: black">欢迎来到学生考试端</span>
        </div>

        <el-dropdown style="width: 135px;cursor: pointer;text-align: right;float: right;color: black">
          <span>{{ Student.username }}</span>
          <i class="el-icon-caret-bottom" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown" style="width: 90px;text-align: center">
            <el-dropdown-item @click="to">
              <router-link to="/Stu_PersonalCenter" style="text-decoration: none">
                个人中心
              </router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <router-link to="/StuResetPassword" style="text-decoration: none;color: black">
                修改密码
              </router-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="quit">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main>
        <div style="text-align: center">
          <p style="color: #ffffff;text-shadow: 1px 2px 5px #000000">考试列表</p>
        </div>

        <el-card style="width: 950px;height: 130px;border-radius: 25px;margin: 30px auto"
                 v-for="(item,index) in tableData"
                 :key="item.id">
          <div>
            <p>
              <span>{{ item.name }}</span>
              <span style="float: right;color: red;margin-right: 10px" v-show="item.state === '未开始'">考试{{
                  item.state
                }}</span>
              <span style="float: right;color: #00a9ff;margin-right: 10px" v-show="item.state === '进行中'">考试{{
                  item.state
                }}</span>
              <span style="float: right;color: #b2b2b2;margin-right: 10px" v-show="item.state === '已结束'">考试{{
                  item.state
                }}</span>
            </p>
            <p>
              <span style="margin-right: 100px">考场：<span class="text">{{ item.room }}</span></span>
              <span style="margin-right: 100px">考试时间：<span class="text">{{ startExamTime[index] }} ~ {{ endExamTime[index] }}</span></span>
              <span style="margin-right: 60px">监考老师：<span class="text">{{ item.invigilator }}</span></span>
              <span style="float: right">
                <el-button type="primary" plain size="small" @click="doPaper(item.id)"
                           v-show="item.enable && item.state === '进行中'">开始考试</el-button>
                <el-button type="success" plain size="small" @click="sign(item.id)"
                           v-show="item.state === '未开始'">报名</el-button>
              </span>
            </p>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "System_StuExam",
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      Student: localStorage.getItem("Student") ? JSON.parse(localStorage.getItem("Student")) : {},
      startExamTime: [],
      endExamTime: [],
    }
  },
  created() {
    this.load()
  },
  methods: {
    // 报名
    sign(examId) {
      let form = {studentId: this.Student.id, examId: examId}
      this.request.post("/sign", form).then(res => {
        if (res.code === "code_200") {
          this.$message.success("报名成功！")
        }
      })
    },
    // 开始考试
    doPaper(examId) {
      this.$router.push("/Stu_ExamPaper?examId=" + examId)
    },
    // 请求后台数据
    load() {
      this.request.get("/exam/page/front", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.tableData = res.data.records

        this.tableData.forEach(item => {
          let examTime = new Date(item.time)
          this.startExamTime.push(this.$moment(examTime).format("YYYY-MM-DD HH:mm"))
          let timeDifference = examTime.getMinutes() + parseInt(item.duration)
          examTime.setMinutes(timeDifference)
          this.endExamTime.push(this.$moment(examTime).format("HH:mm"))
        })

        this.total = res.total
      })

      this.request.get("/course").then(res => {
        this.courses = res
      })
    },
    // 总页数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    // 当前页
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    // 退出
    quit() {
      localStorage.removeItem("Student")
      this.$message.success("退出成功！")
      this.$router.push("/StuLogin")
    },
    to() {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.el-header {
  background: #9285e3;
  line-height: 60px;
}

.el-main {
  background-image: url('../assets/01.jpg');
  background-size: cover;
}

.text:hover {
  color: #ff0000;
}

.logo{
  -moz-user-select: none; /* Firefox私有属性 */
  -webkit-user-select: none; /* WebKit内核私有属性 */
  -ms-user-select: none; /* IE私有属性(IE10及以后) */
  user-select: none; /* CSS3属性 */
}
</style>